<template>
    <div>
        <h2>我是用于界面</h2>
        <p>我是用户的相关信息</p>
        <p>{{userId}}</p>
        <!--也可以直接拿-->
        <p>{{$route.params.abc}}</p>
        <p>{{$route.params}}</p>
    </div>
</template>

<script>
//$router和$route的区别
//router为VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，例如history对象。。。经常用的跳转链接就可以用this.$router.push，和router-link跳转一样。。。

//route相当于当前正在跳转的路由对象。。可以从里面获取name,path,params,query等
export default {
    computed: {
    userId(){
      //这里的abc是你在index.js路由配置路径中配置的参数
      return this.$route.params.abc
    }
  },

}
</script>

<style>

</style>